<div id="page_friends_list" data-page="page_friends_list" class="page">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
            <div class="center">我的影友</div>
            <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
        </div>
    </div>
    <div class="toolbar tabbar">
        <div class="toolbar-inner">
            <a href="#tab_friends_follow" class="button tab-link"><b>关注</b></a>
            <a href="#tab_friends_follower" class="button tab-link"><b>分享</b></a>
        </div>
    </div>
    <div class="tabs-animated-wrap">
        <div class="tabs">
            <div id="tab_friends_follow" class="page-content tab">
                <div class="content-block-title">已有粉丝<%-items.length%>人</div>
                <div class="list-block media-list">
                    <ul>
                        <li v-for="item in items" track-by="id">
                            <a v-touch:tap="onItemTap(item)" class="item-link item-content">
                                <div class="item-media"><img v-bind:src="item.img" width="80"></div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title"><%-item.author%></div>
                                        <div class="item-after">$<%-item.year%></div>
                                    </div>
                                    <div class="item-subtitle"><%-item.title%></div>
                                    <div class="item-text"><%-item.description%></div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="tab_friends_follower" class="page-content tab">
                <div class="content-block">
                    <p>This is tab 2 content</p>
                    <p>Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.</p>
                    <p>Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.</p>
                </div>
            </div>
        </div>
    </div>
</div>
